<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->
  <template>
    <!-- 点位 -->
    <div class="layout-padding">
      <basic-container class="layout-padding-auto layout-padding-view">
        <avue-crud
            v-model='form'
            ref='crud'
            :page='page'
            :data='tableData'
            :permission='permissionList'
            :table-loading='tableLoading'
            :option='tableOption'
            :before-open='handleOpenBefore'
            @on-load='getList'
            @search-change='searchChange'
            @refresh-change='refreshChange'
            @size-change='sizeChange'
            @current-change='currentChange'
            @row-update='handleUpdate'
            @row-save='handleSave'
            @row-del='rowDel'
            @selection-change='selectionChange'
        >
          <template #menu-left>
            <el-button
                class='filter-item'
                plain
                type='primary'
                icon='el-icon-delete'
                @click='plDelete'
            >
              批量删除
            </el-button>
            <!-- v-if='permissions.om_omicheckpoint_import' -->
            <el-button
               
                class="filter-item"
                plain
                type="primary"
                icon="el-icon-upload"
                @click="$refs.excelUpload.show()">导入
            </el-button>
            <!-- v-if='permissions.om_omicheckpoint_export' -->
            <el-button
                
                class="filter-item"
                plain
                type="primary"
                icon="el-icon-download"
                @click="exportExcel">导出
            </el-button>
          </template>
          <template #pointStatus='{row}'>
            <el-tag v-if='row.pointStatus==="1"' type='success'>已启用</el-tag>
            <el-tag v-else type='warning'>已停用</el-tag>
          </template>
          <template #areaNo-form='{ row }'>
            <avue-select
                v-model='form.areaNo'
                :dic='treeLocationData'
                :props='defaultPropstree'
                filterable
                placeholder='请选择区域'
            ></avue-select>
          </template>
          <template #pointStatus-form>
            <el-radio v-model='form.pointStatus' label='1' border>启用</el-radio>
            <el-radio v-model='form.pointStatus' label='0' border>停用</el-radio>
          </template>
          <template #OmlCheckPoint-form='{ row }'>
            <avue-crud
                v-model='form1'
                :option='infoOption'
                :data='infoData1'
                @row-update='handleUpdate1'
                @row-save='handleSave1'
                @row-del='rowDel1'
                :before-open='handleOpenBeforea'
            >
              <template #modelType-form='{ row }'>
                <avue-select
                    :disabled="this.infoType === '1'"
                    v-model='form1.modelType'
                    :dic='modelTypeData'
                    :props='defaultProps1'
                    placeholder='请选择设备类型'
                >
                </avue-select>
              </template>
              <template #devType-form='{ row }'>
                <avue-select
                    :disabled="this.infoType === '1'"
                    v-model='form1.devType'
                    :dic='devTypeData'
                    :props='defaultProps2'
                    placeholder='请选择设备型号'
                >
                </avue-select>
              </template>
  
              <template #deviceId-form='{ row }'>
                <avue-select
                    :disabled="this.infoType === '1'"
                    v-model='form1.deviceId'
                    :dic='deviceNameData'
                    :props='defaultProps3'
                    placeholder='请选择设备名称'
                >
                </avue-select>
              </template>
  
              <!-- <template #deviceNo-form="{ row }">
                <avue-select
                  :disabled="this.infoType == '1'"
                  v-model="form1.deviceNo"
                  :dic="onlineDevlist"
                  :props="defaultProps"
                  placeholder="请选择设备编号"
                >
                </avue-select>
              </template> -->
  
              <template #pointMatters-form='{ row }'>
                <avue-input
                    :disabled="this.infoType === '0'"
                    v-model='form1.pointMatters'
                    placeholder='请输入事项名称'
                >
                </avue-input>
              </template
              >
              <template #remark-form='{ row }'>
                <avue-input
                    :disabled="this.infoType === '0'"
                    v-model='form1.remark'
                    placeholder='请输入事项详情'
                >
                </avue-input>
              </template>
            </avue-crud>
          </template>
        </avue-crud>
      </basic-container>
      <!--excel 模板导入 -->
      <excel-upload
          ref="excelUpload"
          title="巡检点位信息导入"
          url="/om/omicheckpoint/import"
          temp-name="巡检点位信息.xlsx"
          temp-url="/admin/sys-file/local/ponitInfo.xlsx"
          @refreshDataList="handleRefreshChange">
      </excel-upload>
    </div>
  </template>
  
  <script>
  import {
    fetchList,
    getObj,
    addObj,
    putObj,
    delObj,
    fetchTree,
    fetchOnlineDevlist,
    getDeviceType,
    getDevtype,
    getAssets,
    delAllObj
  } from '/@/api/check/omicheckpoint'
  import {tableOption} from '/@/const/crud/check/omicheckpoint'
//   import {mapGetters} from 'vuex'
  import ExcelUpload from '/@/components/ExcelUpload/index.vue'
  export default {
    name: 'omicheckpoint',
    data() {
      let _this = this
      return {
        onlineDevlist: [],
        modelTypeData: [],
        devTypeData: [],
        deviceNameData: [],
        defaultProps: {
          label: 'deviceName',
          value: 'deviceNo'
        },
        defaultProps1: {
          label: 'bamAssetsTypeAlias',
          value: 'bamAssetsTypeCode'
        },
        defaultProps2: {
          label: 'bamAAssetsModelCn',
          value: 'bamAAssetsDeviceCode'
        },
        defaultProps3: {
          label: 'assetsName',
          value: 'assetsName'
        },
        treeLocationData: [],
        defaultPropstree: {
          label: 'inspectionName',
          value: 'inspectionCode'
        },
        infoType: null,
        form: {
          pointStatus: '1'
        },
        form1: {},
        infoOption: {
          index: true,
          searchBtn: false,
          columnBtn: false,
          refreshBtn: false,
          editBtn: false,
          editDisabled: true,
          column: [
            {
              type: 'select',
              label: '巡检类型',
              dicData: [
                {
                  label: '设备',
                  value: '0'
                },
                {
                  label: '事项',
                  value: '1'
                }
              ],
              prop: 'pointType', //0设备1事项
              change: function (obj) {
                if (obj.value) {
                  _this.infoType = obj.value
                }
              },
              editDisabled: true,
              rules: [
                {
                  required: true,
                  message: '请选择巡检类型',
                  trigger: 'blur'
                }
              ]
            },
            {
              type: 'tree',
              label: '设备栏目',
              prop: 'assetsType',
              filterable: true,
              hide: true,
              dicUrl: `/bm/bamaassetscloumn/fullTreeMenu?lazy=true&level=1`,
              props: {
                label: 'name',
                value: 'id'
              },
              width: 150,
              overHidden: true,
              editDisplay: false
            },
            {
              // type: 'select',
              label: '设备类型',
              prop: 'modelType',
              editDisabled: true,
              hide: true,
              width: 150
            },
            {
              // type: 'select',
              label: '设备型号',
              prop: 'devType',
              editDisabled: true,
              hide: true,
              width: 150
            },
            {
              // type: 'select',
              label: '设备名称',
              prop: 'deviceId',
              editDisabled: true,
              hide: true
            },
            {
              type: 'input',
              label: '设备名称',
              prop: 'deviceName',
              editDisabled: true,
              addDisplay: false
              // editDisplay: false
            },
            {
              type: 'input',
              label: '设备编号',
              prop: 'deviceNo',
              width: 200,
              overHidden: true,
              addDisabled: true,
              editDisabled: true
            },
            {
              label: '事项名称',
              prop: 'pointMatters',
              formslot: true
            },
            {
              type: 'input',
              label: '事项详情',
              prop: 'remark',
              formslot: true
            }
          ]
        },
        areaNoid: '',
        infoData1: [],
        searchForm: {},
        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        tableLoading: false,
        tableOption: tableOption,
        selectList: []
      }
    },
    components: {
      ExcelUpload,
    },
    watch: {
      'form.areaNo'(value) {
        this.areaNoid = value
        if (value) {
          this.getOnlineDevlist()
        }
      },
      'form1.assetsType': {
        handler(val, oldVal) {
          if (val) {
            getDeviceType({bamAssetsTypeMcode: val}).then((res) => {
              this.modelTypeData = res.data
            })
          }
        }
      },
      'form1.modelType': {
        handler(val, oldVal) {
          if (val) {
            getDevtype({bamAAssetsModelCode: val}).then((res) => {
              this.devTypeData = res.data
            })
          }
        }
      },
      'form1.devType': {
        handler(val) {
          if (val) {
            getAssets({devType: val, eStatus: 1}).then((res) => {
              this.deviceNameData = res.data
              // this.form1.deviceNo = this.deviceNameData.deviceNo
            })
          }
        }
      },
      'form1.deviceId': {
        handler(val) {
          if (val) {
            const list = this.deviceNameData.find((item) => item.assetsName === val)
            if (list) {
              this.form1.deviceNo = list.deviceNo
              this.form1.deviceName = list.assetsName
            }
          } else {
            this.form1.deviceNo = ''
          }
        }
      },
      infoType(val, oldVal) {
        let assetsType = this.findObject(this.infoOption.column, 'assetsType')
        if (val == '1') {
          assetsType.disabled = true
        } else {
          assetsType.disabled = false
        }
      }
    },
    computed: {
    //   ...mapGetters(['permissions']),
      permissionList() {
        return {
        //   addBtn: this.validData(this.permissions.om_omicheckpoint_add, false),
        //   delBtn: this.validData(this.permissions.om_omicheckpoint_del, false),
        //   editBtn: this.validData(this.permissions.om_omicheckpoint_edit, false)

          // editBtn: this.validData(this.permissions.om_omicheckpoint_edit, false)
        }
      }
    },
    methods: {
      // 导出
      exportExcel(){
        this.downBlobFile('/om/omicheckpoint/export', this.searchForm, '巡检点位信息.xlsx')
      },
      // 更新表格数据
      handleRefreshChange() {
        this.getList(this.page)
      },
      selectionChange(list) {
        this.selectList = list
      },
      getOnlineDevlist() {
        fetchOnlineDevlist(this.areaNoid).then((response) => {
          this.onlineDevlist = response.data
          // this.onlineDevlist.forEach((obj) => {
          //   obj.powerid = obj.powerid;
          // });
        })
      },
      handleLocation() {
        fetchTree().then((response) => {
          this.treeLocationData = response.data
        })
      },
      getList(page, params) {
        this.tableLoading = true
        fetchList(
            Object.assign(
                {
                  current: page.currentPage,
                  size: page.pageSize
                },
                params,
                this.searchForm
            )
        )
            .then((response) => {
              this.tableData = response.data.records
              this.page.total = response.data.total
              this.tableLoading = false
            })
            .catch(() => {
              this.tableLoading = false
            })
      },
      rowDel: function (row, index) {
        this.$confirm('是否确认删除? 请先前往相应的路线删除此点位！', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning'
        })
            .then(function () {
              return delObj(row.ipId)
            })
            .then((data) => {
              this.$message.success('删除成功')
              this.getList(this.page)
            })
            .catch((cancelorerror) => {
            })
      },
      handleUpdate: function (row, index, done, loading) {
        row.relList = this.infoData1
        putObj(row)
            .then((data) => {
              this.$message.success('修改成功')
              done()
              this.getList(this.page)
            })
            .catch(() => {
              loading()
            })
      },
      handleSave: function (row, done, loading) {
        row.relList = this.infoData1
        addObj(row)
            .then((data) => {
              this.$message.success('添加成功')
              done()
              this.getList(this.page)
            })
            .catch(() => {
              loading()
            })
      },
      sizeChange(pageSize) {
        this.page.pageSize = pageSize
      },
      currentChange(current) {
        this.page.currentPage = current
      },
      searchChange(form, done) {
        this.searchForm = form
        this.page.currentPage = 1
        this.getList(this.page, form)
        done()
      },
      refreshChange() {
        this.getList(this.page)
      },
      handleOpenBefore(show, type) {
        if (type === 'add') {
          this.form.pointStatus = '1'
        }
        this.handleLocation()
        this.areaNoid = this.form.areaNo
        this.getOnlineDevlist()
        // this.handleLocation();
        this.infoData1 = this.form.relList ? JSON.parse(JSON.stringify(this.form.relList)) : []
  
        show()
      },
      handleUpdate1(row, index, done, loading) {
        loading()
        this.infoData1.forEach((obj) => {
          if (obj.id === row.id) {
            obj.pointType = row.pointType
            obj.deviceNo = row.deviceNo
            obj.pointMatters = row.pointMatters
            obj.remark = row.remark
            // this.onlineDevlist.forEach((obj1) => {
            //   if (obj.deviceId == obj1.id) {
            //     obj.deviceName = obj1.deviceName
            //   }
            // })
          }
        })
        done()
      },
      handleSave1(row, done, loading) {
        loading()
        this.infoData1.push(row)
        // this.onlineDevlist.forEach((obj1) => {
        //   if (row.deviceId == obj1.id) {
        //     row.deviceName = obj1.deviceName
        //   }
        // })
        done()
      },
      rowDel1(row, index) {
        let _this = this
        this.$confirm('是否确认删除index为' + (index + 1), '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
            .then(function () {
              _this.infoData1.splice(row.$index, 1)
            })
            .then((data) => {
              this.$message.success('删除成功')
            })
      },
      handleOpenBeforea(show, type) {
        if (type == 'add' && this.areaNoid != '' && this.areaNoid != null) {
          show()
        } else if (type == 'edit') {
          let modelType = this.findObject(this.infoOption.column, 'modelType')
          let devType = this.findObject(this.infoOption.column, 'devType')
          let deviceId = this.findObject(this.infoOption.column, 'deviceId')
          modelType.editDisplay = false
          devType.editDisplay = false
          deviceId.editDisplay = false
          show()
        } else {
          this.$message.error('请选择区域')
        }
      },
      //批量删除
      plDelete() {
        if (this.selectList.length > 0) {
          this.$confirm('是否确认删除以选择的数据', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
              .then(() => {
                let ids = []
                this.selectList.forEach((data) => {
                  ids.push(data.ipId)
                })
                return delAllObj(ids)
              })
              .then((data) => {
                this.$message.success('删除成功')
                this.getList(this.page)
              })
              .catch((cancelorerror) => {
              })
        }
      }
    }
  }
  </script>
  <style>
  .el-table__inner-wrapper::before {
    height: 0;
  }
  </style>
  